<template>
  <div class="generic-calibration-panel">
    <div class="main-content">
      <div class="calibration-panel">
        <h3 class="panel-title">{{ deviceName }}标定控制</h3>
        <div class="panel-content">
          <!-- 左侧：图形表示 -->
          <div class="visual-representation">
            <div class="device-icon-container">
              <el-icon class="device-icon"><Setting /></el-icon>
              <span class="device-label">{{ deviceName }}</span>
            </div>
            <div class="calibration-area">
              <div class="target-point">
                <span class="dot">●</span>
                <span class="label">标定点</span>
              </div>
            </div>
          </div>

          <!-- 中间：参数设置 -->
          <div class="parameter-fields">
            <div class="field-group">
              <label>标定参数1:</label>
              <el-input 
                v-model="calibrationData.param1"
                placeholder="请输入参数"
                size="large"
              />
            </div>
            <div class="field-group">
              <label>标定参数2:</label>
              <el-input 
                v-model="calibrationData.param2"
                placeholder="请输入参数"
                size="large"
              />
            </div>
            <div class="field-group">
              <label>当前状态:</label>
              <el-input
                v-model="calibrationData.status" 
                size="large"
                readonly
              />
            </div>
            <div class="field-group">
              <label>标定精度:</label>
              <el-input
                v-model="calibrationData.accuracy" 
                size="large"
                readonly
              />
            </div>
          </div>

          <!-- 右侧：控制按钮 -->
          <div class="control-section">
            <div class="status-indicator">
              <el-icon class="status-icon" :class="{ active: isActive }">
                <Sunny />
              </el-icon>
              <span class="status-text">{{ isActive ? '运行中' : '待机' }}</span>
            </div>

            <div class="control-buttons">
              <el-button type="primary" size="large" @click="handleStartCalibration">
                开始标定
              </el-button>
              <el-button type="success" size="large" @click="handleStopCalibration">
                停止标定
              </el-button>
              <el-button type="warning" size="large" @click="handleResetCalibration">
                重置标定
              </el-button>
              <el-button type="info" size="large" @click="handleSaveCalibration">
                保存标定
              </el-button>
            </div>

            <div class="calibration-info">
              <h4>标定信息</h4>
              <div class="info-item">
                <span class="label">上次标定时间:</span>
                <span class="value">{{ calibrationData.lastCalibrationTime || '未标定' }}</span>
              </div>
              <div class="info-item">
                <span class="label">标定状态:</span>
                <span class="value">{{ calibrationData.calibrationStatus }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { Setting, Sunny } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

interface Props {
  deviceName: string
  deviceIcon?: string
}

const props = withDefaults(defineProps<Props>(), {
  deviceIcon: 'Setting'
})

interface CalibrationData {
  param1: string
  param2: string
  status: string
  accuracy: string
  lastCalibrationTime: string
  calibrationStatus: string
}

const isActive = ref(false)

const calibrationData = reactive<CalibrationData>({
  param1: '',
  param2: '',
  status: '待机',
  accuracy: '0.001',
  lastCalibrationTime: '',
  calibrationStatus: '未标定'
})

const handleStartCalibration = (): void => {
  isActive.value = true
  calibrationData.status = '标定中'
  ElMessage.success(`${props.deviceName}标定已开始`)
}

const handleStopCalibration = (): void => {
  isActive.value = false
  calibrationData.status = '已停止'
  ElMessage.warning(`${props.deviceName}标定已停止`)
}

const handleResetCalibration = (): void => {
  calibrationData.param1 = ''
  calibrationData.param2 = ''
  calibrationData.status = '待机'
  calibrationData.calibrationStatus = '未标定'
  ElMessage.info(`${props.deviceName}标定已重置`)
}

const handleSaveCalibration = (): void => {
  calibrationData.calibrationStatus = '已标定'
  calibrationData.lastCalibrationTime = new Date().toLocaleString()
  ElMessage.success(`${props.deviceName}标定数据已保存`)
}
</script>

<style scoped>
.generic-calibration-panel {
  padding: 24px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.main-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.calibration-panel {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.panel-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 20px 0;
  padding-bottom: 12px;
  border-bottom: 2px solid #e6f7ff;
}

.panel-content {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  align-items: start;
}

/* 左侧图形表示 */
.visual-representation {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.device-icon-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 2px solid #e9ecef;
}

.device-icon {
  font-size: 32px;
  color: #1890ff;
}

.device-label {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.calibration-area {
  position: relative;
  width: 200px;
  height: 100px;
  background: #f8f9fa;
  border: 2px dashed #dee2e6;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.target-point {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.target-point .dot {
  font-size: 24px;
  color: #e74c3c;
}

.target-point .label {
  font-size: 12px;
  color: #666;
}

/* 中间参数字段 */
.parameter-fields {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field-group label {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

/* 右侧控制区域 */
.control-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
}

.status-icon {
  font-size: 20px;
  color: #ccc;
}

.status-icon.active {
  color: #f39c12;
}

.status-text {
  font-size: 14px;
  color: #666;
}

.control-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.calibration-info {
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.calibration-info h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #333;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.info-item .label {
  font-size: 12px;
  color: #666;
}

.info-item .value {
  font-size: 12px;
  color: #333;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .panel-content {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .control-buttons .el-button {
    width: 100%;
  }
}
</style>
